<div ng-switch="configDefinition.type">
  <div ng-switch-when="BOOLEAN">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'booleanConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="NUMBER">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="STRING">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="CHARACTER">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'characterConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_STRING" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_NUMBER" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_DATE" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_BOOLEAN" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="EL_OBJECT" class="expression-language"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'elStringConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="LIST"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'listConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="MAP"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'mapConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="TEXT"
       ng-click="onFieldSelectorFocus(detailPaneConfig)">
    <ng-include src="'labelConfigurationTemplate'"></ng-include>
    <ng-include src="'textConfigurationTemplate'"></ng-include>
  </div>

  <div ng-switch-when="MODEL"
       ng-switch="configDefinition.model.modelType">

    <div ng-switch-when="VALUE_CHOOSER">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'valueChooserConfigurationTemplate'"></ng-include>
    </div>


    <div ng-switch-when="FIELD_SELECTOR_MULTI_VALUED"
         ng-click="onFieldSelectorFocus(detailPaneConfig)"
         class="clearfix">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'fieldSelectorMultiValuedConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="FIELD_SELECTOR_SINGLE_VALUED"
         ng-click="onFieldSelectorFocus(detailPaneConfig)"
         class="clearfix">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'fieldSelectorSingleValuedConfigurationTemplate'"></ng-include>
    </div>

    <div ng-switch-when="LANE_PREDICATE_MAPPING"
         ng-click="onFieldSelectorFocus(detailPaneConfig)">
      <ng-include src="'labelConfigurationTemplate'"></ng-include>
      <ng-include src="'lanePredicateMappingConfigurationTemplate'"></ng-include>
    </div>


    <div ng-switch-when="COMPLEX_FIELD" class="clearfix">
      <ng-include ng-if="configDefinition.label" src="'labelConfigurationTemplate'"></ng-include>

      <div class="controls" ng-class="configDefinition.label ? 'col-md-7' : 'col-md-12'">

        <table class="table" ng-if="_.size(configDefinition.model.configDefinitions) <= 4">
          <thead>
          <tr>
            <th class="custom-field-property"
                ng-repeat="customeFieldConfigDefintion in configDefinition.model.configDefinitions">
              <span>{{customeFieldConfigDefintion.label}}</span>
              <i class="fa fa-info-circle help-icon"
                 ng-if="customeFieldConfigDefintion.description"
                 tooltip-placement="right"
                 tooltip-append-to-body="false"
                 tooltip="{{customeFieldConfigDefintion.description}}"
                 tooltip-trigger="mouseenter"></i>
            </th>
            <th class="custom-field-buttons"></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="customFieldValue in customeFieldValueList = detailPaneConfig.configuration[configIndex].value track by $index">

            <td class="col-md-5"
                ng-repeat="customFieldConfigDefinition in configDefinition.model.configDefinitions">

              <div ng-if="(!customFieldConfigDefinition.dependsOn || verifyCustomFieldDependsOn(detailPaneConfig, customFieldValue, customFieldConfigDefinition))"
                   ng-switch="customFieldConfigDefinition.type">
                <div ng-switch-when="NUMBER"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)"
                     class="expression-language">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="STRING"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)"
                     class="expression-language">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="EL_STRING" class="expression-language"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="EL_NUMBER" class="expression-language"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="EL_DATE" class="expression-language"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="EL_BOOLEAN" class="expression-language"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="EL_OBJECT" class="expression-language"
                     ng-click="onFieldSelectorFocus(detailPaneConfig)">
                  <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                </div>

                <div ng-switch-when="MODEL"
                     ng-switch="customFieldConfigDefinition.model.modelType">

                  <div ng-switch-when="VALUE_CHOOSER">
                    <select class="form-control"
                            name="{{customFieldConfigDefinition.name + $index}}"
                            ng-disabled="isPipelineReadOnly || isPipelineRunning"
                            ng-model="customFieldValue[customFieldConfigDefinition.name]">
                      <option ng-repeat="listValue in customFieldConfigDefinition.model.values"
                              value="{{listValue}}"
                              ng-selected="listValue === customFieldValue[customFieldConfigDefinition.name]">
                        {{customFieldConfigDefinition.model.labels[$index]}}
                      </option>
                    </select>
                  </div>

                  <div ng-switch-when="FIELD_SELECTOR_MULTI_VALUED"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)"
                       class="clearfix">
                    <ui-select multiple
                               tagging="tagTransform"
                               tagging-label=""
                               reset-search-input="true"
                               tagging-tokens=",|ENTER"
                               ng-disabled="isPipelineReadOnly || isPipelineRunning"
                               ng-model="customFieldValue[customFieldConfigDefinition.name]">
                      <ui-select-match
                        placeholder="{{'home.detailPane.configurationTab.selectFields' | translate}}">
                        {{$item}}
                      </ui-select-match>
                      <ui-select-choices repeat="fieldPath in fieldPaths | filter:$select.search">
                        {{fieldPath}}
                      </ui-select-choices>
                    </ui-select>
                  </div>

                  <div ng-switch-when="FIELD_SELECTOR_SINGLE_VALUED"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)"
                       class="clearfix input-group">
                    <input type="text" class="form-control" ng-model="customFieldValue[customFieldConfigDefinition.name]">
                    <div class="input-group-btn">
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li ng-repeat="fieldPath in fieldPaths track by $index">
                          <a href="#" ng-click="customFieldValue[customFieldConfigDefinition.name] = fieldPath">{{fieldPath}}</a>
                        </li>
                        <li role="presentation" class="dropdown-header"
                            ng-if="fieldPathsFetchInProgress"
                            translate="home.detailPane.configurationTab.loading">Loading...</li>
                        <li role="presentation" class="dropdown-header"
                            ng-if="!fieldPathsFetchInProgress && fieldPaths.length === 0"
                            translate="home.detailPane.configurationTab.noFieldFound">No Field found.</li>
                      </ul>
                    </div>
                  </div>

                </div>
              </div>

            </td>

            <td>
              <div class="btn-group" role="group" aria-label="Default button group" ng-hide="isPipelineReadOnly || isPipelineRunning">
                <button type="button" class="btn btn-default"
                        ng-click="removeFromCustomField(detailPaneConfig, customeFieldValueList, $index)">
                  <i class="fa fa-minus pointer"></i>
                </button>
                <button type="button" class="btn btn-default"
                        ng-show="$last"
                        ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[configIndex].value, configDefinition.model.configDefinitions)">
                  <i class="fa fa-plus pointer"></i>
                </button>
              </div>
            </td>

          </tr>
          </tbody>
        </table>


        <table class="table table-bordered" ng-if="_.size(configDefinition.model.configDefinitions) > 4">
          <tbody>
          <tr ng-repeat="customFieldValue in customeFieldValueList = detailPaneConfig.configuration[configIndex].value track by $index">

            <td>
              <div class="form-group "
                   ng-repeat="customFieldConfigDefinition in configDefinition.model.configDefinitions | orderBy: 'displayPosition'"
                   ng-if="(!customFieldConfigDefinition.dependsOn || verifyCustomFieldDependsOn(detailPaneConfig, customFieldValue, customFieldConfigDefinition))">

                <label class="col-lg-3 control-label">{{customFieldConfigDefinition.label}}
                  <i class="fa fa-info-circle help-icon"
                     tooltip-placement="right"
                     tooltip-append-to-body="false"
                     tooltip="{{customFieldConfigDefinition.description || customFieldConfigDefinition.label}}"
                     tooltip-trigger="mouseenter"></i>
                </label>

                <div class="controls col-lg-9" ng-switch="customFieldConfigDefinition.type">
                  <div ng-switch-when="NUMBER">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="STRING">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="PASSWORD">
                    <ng-include src="'passwordComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="EL_STRING" class="expression-language"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="EL_NUMBER" class="expression-language"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="EL_DATE" class="expression-language"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="EL_BOOLEAN" class="expression-language"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="EL_OBJECT" class="expression-language"
                       ng-click="onFieldSelectorFocus(detailPaneConfig)">
                    <ng-include src="'elStringComplexConfigurationTemplate'"></ng-include>
                  </div>

                  <div ng-switch-when="MODEL"
                       ng-switch="customFieldConfigDefinition.model.modelType">

                    <div ng-switch-when="VALUE_CHOOSER">
                      <select class="form-control"
                              name="{{customFieldConfigDefinition.name + $index}}"
                              ng-disabled="isPipelineReadOnly || isPipelineRunning"
                              ng-model="customFieldValue[customFieldConfigDefinition.name]">
                        <option ng-repeat="listValue in customFieldConfigDefinition.model.values"
                                value="{{listValue}}"
                                ng-selected="listValue === customFieldValue[customFieldConfigDefinition.name]">
                          {{customFieldConfigDefinition.model.labels[$index]}}
                        </option>
                      </select>
                    </div>

                    <div ng-switch-when="FIELD_SELECTOR_MULTI_VALUED"
                         ng-click="onFieldSelectorFocus(detailPaneConfig)"
                         class="clearfix">
                      <ui-select multiple
                                 tagging="tagTransform"
                                 tagging-label=""
                                 reset-search-input="true"
                                 tagging-tokens=",|ENTER"
                                 ng-disabled="isPipelineReadOnly || isPipelineRunning"
                                 ng-model="customFieldValue[customFieldConfigDefinition.name]">
                        <ui-select-match
                          placeholder="{{'home.detailPane.configurationTab.selectFields' | translate}}">
                          {{$item}}
                        </ui-select-match>
                        <ui-select-choices repeat="fieldPath in fieldPaths | filter:$select.search">
                          {{fieldPath}}
                        </ui-select-choices>
                      </ui-select>
                    </div>

                    <div ng-switch-when="FIELD_SELECTOR_SINGLE_VALUED"
                         ng-click="onFieldSelectorFocus(detailPaneConfig)"
                         class="clearfix input-group">
                      <input type="text" class="form-control" ng-model="customFieldValue[customFieldConfigDefinition.name]">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                          <li ng-repeat="fieldPath in fieldPaths track by $index">
                            <a href="#" ng-click="customFieldValue[customFieldConfigDefinition.name] = fieldPath">{{fieldPath}}</a>
                          </li>
                          <li role="presentation" class="dropdown-header"
                              ng-if="fieldPathsFetchInProgress"
                              translate="home.detailPane.configurationTab.loading">Loading...</li>
                          <li role="presentation" class="dropdown-header"
                              ng-if="!fieldPathsFetchInProgress && fieldPaths.length === 0"
                              translate="home.detailPane.configurationTab.noFieldFound">No Field found.</li>
                        </ul>
                      </div>
                    </div>

                  </div>
                </div>


              </div>

            </td>


            <td>
              <div class="btn-group" role="group" aria-label="Default button group" ng-hide="isPipelineReadOnly || isPipelineRunning">
                <button type="button" class="btn btn-default"
                        ng-click="removeFromCustomField(detailPaneConfig, customeFieldValueList, $index)">
                  <i class="fa fa-minus pointer"></i>
                </button>
                <button type="button" class="btn btn-default"
                        ng-show="$last"
                        ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[configIndex].value, configDefinition.model.configDefinitions)">
                  <i class="fa fa-plus pointer"></i>
                </button>
              </div>
            </td>


          </tr>

          </tbody>
        </table>



        <button type="button" class="btn btn-default btn-sm"
                ng-if="!detailPaneConfig.configuration[configIndex].value || detailPaneConfig.configuration[configIndex].value.length === 0"
                ng-hide="isPipelineReadOnly || isPipelineRunning"
                ng-click="addToCustomField(detailPaneConfig, detailPaneConfig.configuration[configIndex].value, configDefinition.model.configDefinitions)">
          <i class="fa fa-plus pointer"></i>
        </button>


        <p class="help-block">{{getConfigurationIssueMessage(detailPaneConfig, configDefinition)}}</p>

      </div>

    </div>

  </div>


</div>
